<script lang="ts" setup>
import { ref, nextTick } from "vue"
import * as echarts from "echarts"
import "echarts/renderers"

const dialogVisible = ref<boolean>(false)
const handleClose = (done: () => void) => {
  done()
}
const chartRef = ref<any>(null)
const dialogShow = async () => {
  dialogVisible.value = true
  nextTick(() => {
    if (chartRef.value) {
      const chartInstance = echarts.init(chartRef.value)
      const option = {
        title: { text: "" },
        tooltip: {},
        xAxis: { data: ["A", "B", "C", "D", "E", "F"] },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      chartInstance.setOption(option)
    }
  })
}
defineExpose({ dialogShow })
</script>

<template>
  <el-dialog v-model="dialogVisible" title="详情" width="80%" :before-close="handleClose">
    <div ref="chartRef" style="height: 400px" />
  </el-dialog>
</template>

<style lang="scss" scoped></style>
